<template>
  <div class="wrapper">
    <div class="header" @click="handleBackPressed">
      <img src="@/assets/images/home.png" class="back" alt="header" />
    </div>
    <div class="main">
      <div class="form">
        <Form :showPen="showPen" @changeShowPen="changeShowPen"></Form>
      </div>
      <div class="chart" v-if="!showPen">
        <Competitiveness></Competitiveness>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useVolunteerStore } from '@/store/volunteer';
import { onBackPressed } from '@/utils/androidFn.js';
import Form from './components/Form.vue';
import Competitiveness from './components/Competitiveness.vue';

const route = useRoute();
const router = useRouter();

const store = useVolunteerStore();
const volunteerInfo = computed(() => store.volunteerInfo);

const showPen = ref(false);

const changeShowPen = (val) => {
  showPen.value = val;
};

const handleBackPressed = () => {
  onBackPressed(router);
};

onBeforeMount(() => {
  if (volunteerInfo.value?.relSubject) {
    if (
      volunteerInfo.value.regionId &&
      volunteerInfo.value.relSubject &&
      volunteerInfo.value.subjectType &&
      volunteerInfo.value.score &&
      volunteerInfo.value.position &&
      volunteerInfo.value.batchType &&
      volunteerInfo.value.batchTypeName &&
      volunteerInfo.value.searchRankYear
    ) {
      showPen.value = false;
    } else {
      showPen.value = true;
    }
  } else {
    showPen.value = true;
  }
});
</script>

<style scoped lang="scss">
.wrapper {
  min-height: 100vh;
  background: url('@/assets/images/homeBg.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 32px;
  box-sizing: border-box;
  .header {
    position: absolute;
    top: 32px;
    left: 32px;
    .back {
      width: 40px;
      height: 40px;
    }
  }
  .main {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
    box-sizing: border-box;
    .form {
      margin-top: 124px;
      width: 686px;
      box-sizing: border-box;
    }
    .chart {
      flex: 1;
    }
  }
}
</style>
